<template>
<!-- Home页面志愿文化 -->
    <div class="culture">
        <div class="information-list" v-for="(item,index) in informationList" :key="index">
            <h4 class="information-list-h4" @click="handleTitle(item.announcementId)"><span>新</span>{{item.title}}</h4>
            <p class="list-content">{{item.introduction}}</p>
            <p class="list-content-time">{{item.data}}</p>
        </div>
    </div>
</template>

<script>
import apiData from "../assets/apiData";

export default {
    name:"Culture",
     data(){
        return{
            informationList:[]
        }
    },
  created() {
  
      apiData.consult.getReslut(3).then(res=>{
        this.informationList = res.data;
      }).catch(err=>{
        console.log(err);
      });
  },
    methods:{
        handleTitle(id){        
            this.$router.push({path: '/details',query:{paicheNo:id}})
        }
    }
}

</script>


<style scoped>
.culture{
    overflow: hidden;
    background-color: #fff;
}
.information-list{
    /* margin-top: 5px; */
    margin: 10px auto;
    width: 96%;
    /* height: 100px; */   /**可伸缩的高度 */
    /* background-color: skyblue; */
    border-bottom: 1px solid #ccc;
}
.information-list h4 span{
    position: relative;
    display: inline-block;
    width: 40px;
    height: 25px;
    margin-right: 10px;
    text-align: center;
    line-height: 25px;
    background-color: red;
    color: #fff;
}
.information-list h4 {
    cursor: pointer;
}
.information-list h4:hover {
    color: salmon;
}
.information-list h4 span::before{
    position:absolute;
    top: 8px;
    right: -4px;
    content: '';
    clear: both;
    display: block;
    width: 10px;
    height: 10px;
    background-color: red;
    transform: rotate(45deg);
    z-index: 999;
}
.list-content{
    margin-left: 5px;
    height: 60px;
    overflow: hidden;
    font-size: 12px;
    color: #6c6c6c;
}
.list-content-time{
    margin-left: 5px;
    margin-top:5px;
    font-size: 12px;
    color: #6c6c6c;
}
</style>